<template>
    <div class="detailBox">
    
      <div class="detailWrap" v-if="!isListShow">
          <div class="detailItem" v-show="isDetailItem">
              <div class="item" v-for="(item,index) in detailArray" :key="`item_${index}`" 
                :class="{itemChoose:recordId == item.messageId}" @click="showRecords(true,item)">
                  <div class="itemIn" v-if="item.type == 'file'">
                      <span style='width:16px'>{{index+1}}</span>
                      <img  class="file_pic" draggable="false" v-lazy="$utilJs.getFileType(item.value)" style="width:14px;height:14px;margin:0 3px 0 0"/>
                      <span class="value" v-html="$replaceKeyWords(item.value,oldsearchval,'#fa7500',30)"></span>      
                  </div>
                  <div class="itemIn" v-else>
                      <span style='width:16px'>{{index+1}}</span>
                      <span class="value" v-html="$replaceKeyWords(item.value.replace(/&nbsp;/g,''),oldsearchval,'#fa7500',30)"></span>
                  </div>      
                  <div class="time">
                      <img v-if="item.name == myInfo.name" src="static\image\home\label_sender_my.png" style="width:28px;height:16px;" />
                      <span class="name" v-else>{{item.name}}</span>                      
                      | {{item.time | getTimeAll}}
                  </div>
              </div>
          </div>
        <div class="detailMiddle">
          <div class="detail_in">
            <img src="static\image\search\page_back.png" alt="" @click="$emit('back',false)">
            <span style="color:#e6e6e6;margin:0 16px">|</span>
            <h3>{{ toName }}</h3>
            <div class="tochat" @click.stop="goChat">
                <img src="static\image\home\record_enter_chat.png" alt="">
            </div>            
          </div>
          <div class="detail_in">
            <div class="btn_d">
              <img src="static\image\home\page_last_s.png" style="width:16px;height:16px;" @click="itemNext(-1)"
              :class="{pageNot:detailArray.findIndex(i=>i.messageId==recordId)==0?true:false}" />
              <img src="static\image\home\page_next_s.png" style="width:16px;height:16px;" @click="itemNext(1)" 
              :class="{pageNot:detailArray.findIndex(i=>i.messageId==recordId)==detailArray.length-1?true:false}" />
            </div>
            <span style="color:#e6e6e6;margin:0 8px 0 3px">|</span>     
            <span>
              记录：{{detailArray.findIndex(i=>i.messageId==recordId)+1}}/{{detailArray.length}}
            </span>          
            <div class="number" @click="isDetailItem=!isDetailItem">
              <img v-show="isDetailItem" src="static\image\home\record_fold.png" style="width:10px;height:10px;" />
              <img v-show="!isDetailItem" src="static\image\home\popup_collect.png" style="width:10px;height:10px;" />
            </div>
          </div>
        </div>
      </div>
      <search-record 
        ref="recordDetail"
        v-if="!isListShow"
        :recordList="recordList"
        :recordId="recordId"
        :toInfo="toInfo"
        :staticArray="staticArray"
        :searchArray="searchArray"
        :playerOptions="playerOptions"
        @toForwarding="toForwarding"
        @toDownFile="toDownFile"
        @toBacklog="toBacklog"
      ></search-record>
    </div>
</template>

<script>
import searchMessage from "./search-message.vue"; //组织架构列表组件
import searchRecord from "../template/search_person_record.vue";
export default {
    name:'structureMain',
    props:{
        detailArray:{
            type: Array,
            default: () => {
                return []
            }            
        },
        recordList:{
            type: Array,
            default: () => {
                return []
            }            
        },
        toInfo:{
            type:Object,
            default:{
                id: '',
                name: '',
                isGroup: false
            },
        },
        playerOptions:{
            type:Object,
            default:{}
        },             
        recordId:{
          type:String
        },
        toName:{
          type:String
        },
        isListShow:{
          type:Boolean
        },
        staticArray:{
          type:Object
        },
        searchArray:{
          type:Object
        },
    },
    components:{
        searchMessage,
        searchRecord
    },
    data(){
        return{
            groupListShow:null,
            isDetailItem: false,
            input1:'',
            input2:'',
            defaultImg: 'this.src="static/image/home/person_1.png"',
        }
    },
    computed:{
        myInfo(){
            return this.$store.state.myInfo
        },
        search_list_array:{
            get(){
                return this.$store.state.search_list_array
            },
            set(val){
                this.$store.commit('setsearchListArr',val)
            }
        },
        oldsearchval:{
            get(){
                return this.$store.state.oldsearchval
            },
            set(val){
                this.$store.commit('setoldsearchval',val)
            }
        }        

    },
    watch:{

    },
    methods:{
      toBacklog(item){
        this.$emit('toBacklog', item);
      },
      goChat(){
        this.$emit('searchMdbTochat',this.staticArray)
      },
      showRecords(b,i){
        this.$emit('showRecords',b,i)
        this.isDetailItem = false
      },
      toForwarding(e){
        this.$emit('toForwarding',e)
      },
      toDownFile(e){
        this.$emit('toDownFile',e)
      },
      itemNext(i){
        let n = this.detailArray.findIndex(i=>i.messageId==this.recordId)+i
        this.showRecords(true,this.detailArray[n])
      },       
    },
    mounted(){

    }
}
</script>
<style lang="less" scoped>
.detailBox{
  z-index: 1;
  height: 100%;
  .detailWrap{
    position: relative;
  }
  .detailTitle{
    height: 36px;
    line-height: 36px;
    width: 100%;
    border-bottom: 1px solid #fa7500;
    box-sizing: border-box;
    text-align: left;
    font-weight: bold;
    padding-left: 20px;
  }
  .detailMiddle{
    display: flex;
    width: 100%;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    justify-content: space-between;
    .tochat{
        display:flex;
        cursor: pointer;
        display: inline-block;
        margin-left: 16px;
        line-height: 20px;
        img{
            vertical-align: middle;
            width: 16px;
            height: 16px;
        }
    }    
    img{
      cursor: pointer;
      margin: 0 3px;
    }    
    .number{
      cursor: pointer;
      color: #999;
      margin-left: 20px;
      span{
        color:#fa7500
      }
    }
    .btn_d{
      margin: 0 5px 0 7px;
      display: flex;
      align-items: center;
      span{
        margin-right:7px;
      }
    }
  }
  .detailItem{
    height: 204px;
    width: 100%;
    overflow-y:scroll;
    position: absolute;
    padding: 0;
    top: 30px;
    .item{
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      padding: 6px 20px;
      overflow: hidden;
      span{
          color: #999;
          margin-right: 10px;
      }      
      .time{
        img{
          margin: 0 6px;
          position: relative;
          top: 4px;
        }
      }
      .personInfo{
        display: flex;
        align-items: center;
        width:150px;
      }
      .itemIn{
        flex:1;
        text-align: left;
        max-width: 300px;
        .name{
          font-size: 16px;
          color: #333;
          // font-weight: bold;
          line-height: 20px;
        }
        .value{
          color:#666;
          line-height: 22px;
          font-size: 14px;
          word-break: break-all;
        }
      }
      .time{
        color: #999;
      }
    }
    .itemChoose{
        background-color: #fff4eb;
        border-bottom:#ffbb7f solid 1px;
        border-top:#ffbb7f solid 1px;
    }    
  }
}
</style>